<template>
  <div class="item">
    <hr />
    <ul v-if="datalist.length !== 0">
      <li v-for="item in datalist" :key="item.id" class="titem">
        <input type="checkbox" v-model="item.completed" />
        <input
          class="inp"
          @focus="editorTodo(item)"
          @keyup.esc="cancelEditor(item)"
          type="text"
          disabled
          v-model="item.title"
        />
        <a href="javascript:void(0)" @click="delTodo(item)" class="btnDel"
          >删除</a
        >
      </li>
    </ul>
  </div>
</template>

<script setup>
import {
  ref,
  computed,
  onMounted,
  reactive,
  watch,
  defineProps,
  defineEmits,
  getCurrentInstance,
} from "vue";
import toDoFunc from "../operation";
let { proxy } = getCurrentInstance();
const props = defineProps({
  mainTitle: {
    type: String,
    default: () => "待办事项",
  },
  datalist: {
    type: Array,
    default: () => [],
  },
  todoLists: {
    type: Array,
    default: () => [],
  },
});
const delItem = function (data) {
  proxy
    .$http({
      method: "post",
      url: "/del",
      data,
    })
    .then((res) => {
      proxy.$toast.success(res.data.msg);
    })
    .catch((err) => {
      console.log(err);
    });
};
const { editorTodo, cancelEditor, delTodo } = toDoFunc(props.todoLists, "");
</script>

<style scoped>
.item {
  height: 80rpx;
}
.inp {
  border: none;
  background-color: #fff;
}
.btnDel {
  color: rgb(245, 115, 55);
  font-size: 12px;
  border: 1px solid rgb(240, 240, 240);
  padding: 3px;
}
</style>